<template>
    <view class="bg-gray-50">
        <!-- 医院信息区域 -->

        <view class="bg-white mx-4 mt-4 rounded-3xl p-6 shadow-sm">
            <view class="flex items-start mb-4 text-sm">
                <view class="text-gray-600 min-w-[120rpx] mr-4">信息延续</view>
                <view class="text-gray-800 flex-1 mr-4">延续护理文书</view>
                <view class="text-blue-600 bg-blue-50 px-2 py-1 rounded text-xs">健康档案</view>
            </view>

            <view class="flex items-start mb-4 text-sm">
                <view class="text-gray-600 min-w-[120rpx] mr-4">管理延续</view>
                <view class="text-gray-800 flex-1 mr-4">广西医科大学第二附属医院</view>
                <view class="text-gray-600 mr-2">神经内科</view>
                <view class="text-gray-600">一病区</view>
            </view>

            <view class="flex items-start mb-4 text-sm">
                <view class="text-gray-600 min-w-[120rpx] mr-4">关系延续</view>
                <view class="text-gray-800 flex-1">团队：责任医生张三，责任护士张三，责任护工李四...</view>
            </view>

            <view class="flex items-start mb-4 text-sm">
                <view class="text-gray-600 min-w-[120rpx] mr-4">订单指导员</view>
                <view class="text-gray-800 flex-1 mr-4">广西医科大学第二附属医院</view>
                <view class="text-gray-600 mr-2">神经内科</view>
                <view class="text-gray-600">一病区</view>
            </view>

            <view class="flex items-start mb-4 text-sm">
                <view class="text-gray-600 min-w-[120rpx] mr-4">技术指导机构：</view>
                <view class="text-gray-800 flex-1">广西医科大学第二附属医院</view>
            </view>

            <view class="flex items-start mb-4 text-sm">
                <view class="text-gray-600 min-w-[120rpx] mr-4">服务机构：</view>
                <view class="text-gray-800 flex-1">广西安好医院有限公司</view>
            </view>

            <view class="flex items-start text-sm">
                <view class="text-gray-600 min-w-[120rpx] mr-4">健康管家：</view>
                <view class="text-gray-800 flex-1">张三</view>
            </view>
        </view>

        <!-- 常规项目区域 -->
        <view class="bg-white mx-4 mt-4 rounded-3xl p-6 shadow-sm">
            <view class="flex items-center justify-between">
                <text class="text-lg font-semibold text-gray-800">常规项目</text>
                <view class="flex items-center text-gray-500 text-sm" @click="toggleCustom">
                    <text>{{ isCustomExpanded ? '收起' : '展开' }}</text>
                    <IconFont :name="isCustomExpanded ? 'arrow-up' : 'arrow-down'" size="12" class="ml-2" />
                </view>
            </view>

            <!-- 血糖 -->
            <view v-show="isCustomExpanded" class="mt-6">
                <view class="flex items-center py-4 border-b border-gray-100">
                    <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4 bg-green-500">
                        <IconFont name="droplet" size="24" color="white" />
                    </view>
                    <view class="flex-1">
                        <view class="text-base font-medium text-gray-800 mb-1">血糖</view>
                        <view class="text-sm text-gray-600">血糖数值：9.4(空腹)</view>
                    </view>
                    <view class="px-3 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-600">轻度</view>
                </view>

                <!-- 血氧 -->
                <view class="flex items-center py-4 border-b border-gray-100">
                    <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4 bg-green-500">
                        <IconFont name="droplet" size="24" color="white" />
                    </view>
                    <view class="flex-1">
                        <view class="text-base font-medium text-gray-800 mb-1">血氧</view>
                        <view class="text-sm text-gray-600">血氧饱和度：99%</view>
                    </view>
                    <view class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-600">正常</view>
                </view>

                <!-- 血压·心率 -->
                <view class="flex items-center py-4 border-b border-gray-100">
                    <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4 bg-green-500">
                        <IconFont name="heart" size="24" color="white" />
                    </view>
                    <view class="flex-1">
                        <view class="text-base font-medium text-gray-800 mb-1">血压·心率</view>
                        <view class="text-sm text-gray-600">血压：120/81　　心率：99</view>
                    </view>
                    <view class="px-3 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-600">轻度</view>
                </view>

                <!-- 体温 -->
                <view class="flex items-center py-4 border-b border-gray-100">
                    <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4 bg-green-500">
                        <IconFont name="thermometer" size="24" color="white" />
                    </view>
                    <view class="flex-1">
                        <view class="text-base font-medium text-gray-800 mb-1">体温</view>
                        <view class="text-sm text-gray-600">体温度数：36.0°C</view>
                    </view>
                    <view class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-600">正常</view>
                </view>

                <!-- 心电图 -->
                <view class="flex items-center py-4 border-b border-gray-100">
                    <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4 bg-green-500">
                        <IconFont name="chart-line" size="24" color="white" />
                    </view>
                    <view class="flex-1">
                        <view class="text-base font-medium text-gray-800 mb-1">心电图</view>
                        <view class="text-sm text-gray-600">心电数值：</view>
                    </view>
                    <view class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-600">正常</view>
                </view>

                <!-- 运动 -->
                <view class="flex items-center py-4">
                    <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4 bg-green-500">
                        <IconFont name="running" size="24" color="white" />
                    </view>
                    <view class="flex-1">
                        <view class="text-base font-medium text-gray-800 mb-1">运动</view>
                        <view class="text-sm text-gray-600">运动分数：20</view>
                    </view>
                    <view class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-600">正常</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import { ref } from 'vue'

/**
 * 健康监测页面
 *
 * @description 显示医院信息、常规检查项目和各项健康指标
 * @author AI Assistant
 * @date 2024
 *
 * @features
 * - 医院信息展示
 * - 健康指标监测
 * - 状态标签分类
 * - 响应式设计，适配750rpx设计稿
 * - 使用 NutUI 组件库和 UnoCSS 原子类
 */

// 页面配置
// definePageConfig({
//     navigationBarTitleText: '健康监测',
//     navigationBarBackgroundColor: '#ffffff',
//     navigationBarTextStyle: 'black',
// })
// 定义是否展开自定义区域的状态
const isCustomExpanded = ref(true)

// 切换自定义区域的展开状态
const toggleCustom = () => {
    isCustomExpanded.value = !isCustomExpanded.value
}
</script>
